<template>
  <div class="home-classic">
    <h3>经典歌单</h3>
    <div class="wrapper" ref="wrapper">
  <ul class="content" ref="content">
    <li v-for="(item, index) in listData" :key="index">
        <div class="cover">
          <van-image :src="item.cover_url_medium" radius="10"/>
          <span>{{item.access_num | numFilter(1)}}万</span>
        </div>
        <span>{{ item.title }}</span>
      </li>
  </ul>
  </div>
  </div> 
</template>

<script>
import { betterScrollHorizontal } from "../../common/betterScroll.js"
export default {
  data() {
    return {
      listData:[],
      pageNo: 1, //歌单返回页码
      pageSize: 6, //歌单每页返回数量
      id: 59  //分类推荐歌单id
    }
  },
  created() {
    this.getData(this.id,this.pageNo,this.pageSize)
  },
  methods: {
    //获取推荐歌单数据
    getData(id,pageNo,pageSize) {
      this.$request('get','/recommend/playlist',{
        id,
        pageNo,
        pageSize
      })
      .then(res=> {
        console.log(res)
        if (res.result == 100) { 
          this.listData = res.data.list;
        }
        // console.log(this.listData)
        //异步数据的一些处理
        betterScrollHorizontal(
          this,
          this.$refs.wrapper,
          this.$refs.content,
          this.listData.length,
          10
          );
      })
    },
    //封装一个横向滚动的方法
    // betterScrollHorizontal(num, itemWidth){
    //   //计算内容取（content）的宽度
    //   this.$refs.content.style.width = num * itemWidth + "rem";
    //   this.$nextTick(() => {
    //     //wrapper为template中容器的ref.表示给那个元素设置滚动
    //     this.scroll = new BScroll(this.$refs.wrapper, {
    //       scrollY: false, //关闭纵向滚动
    //     scrollX: true, //横向滚动
    //     startX: 0 //横向滚动的开始位置
    //     })
  
    //   })
    // }
    
  },
//   filters:{
//     //处理播放量的显示格式
//     pram num：小数位固定位数
//     parm value: 处理的位数
//     numFilter(value,num){
//   //把小数位固定为num位
//   return parseFloat(value/1000).toFixed(num)
// }
//   }
}
</script>

<style scoped>
/* .home-recommond>ul{
    display: flex;
    flex-wrap: wrap;
}
.home-recommond>ul>li{
    width: calc((100% - 1rem) / 3 * 1);

}
.home-recommond>ul>li:nth-of-type(3n+2){
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}*/
.cover{
    position: relative;
}
.cover>span{
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    color: white;
    font-size: 14px;
    border-radius: 1rem;
    width: 5rem;
    /* display:inline-block; */
} 
.cover{
  position: relative;
}
.wrapper {
width: 100%;/*容器的宽度就是屏幕的宽度*/
overflow: hidden;
}
/* ul.content {
content内容区的宽度要大于wrapper容器的宽度，12个列表项
width: calc(12 *10rem);
} */
ul.content > li {
/**li默认是块级元素，修改为行内元素，但是要具备块级元素的特性*/
display: inline-block;
width: 10rem;
vertical-align: top;  /**垂直方向的对齐**/
}

/**li里面有两个元素:div和span，所以使用通配符**/
ul.content li * {
margin: 0.1rem;
/*里面的元素与li的边缘有个间距*/
}
ul.content > li > span {
font-size: 0.8rem;
color:#626858;
}
</style>